<template>
  <view class="choose-user-container">
    <!-- 搜索栏 -->
    <div class="search-container">
      <div class="search-box">
        <text class="search-icon">🔍</text>
        <input
          type="text"
          class="search-input"
          placeholder="搜索用户昵称/手机号"
          placeholder-class="placeholder"
          confirm-type="search"
          v-model="query.name"
          @blur="searchUser"
          clearable
        />
      </div>
    </div>
    <!-- 用户列表 -->
    <scroll-view class="user-list" scroll-y @scrolltolower="loadMore">
      <view
        class="user-item"
        v-for="user in users"
        :key="user.id"
        @click="selectUser(user)"
      >
        <image
          class="avatar"
          :src="
            user.picture ||
            'https://cphimg.leyoo888.com/dev/upload/supplier/2025-07-24/1753352070743.png?x-oss-process=image/resize,w_200,h_200'
          "
        />
        <view class="user-info">
          <view class="user-name">{{ user.name }}</view>
          <view class="user-phone">{{ user.mobile || "未设置手机号" }}</view>
        </view>
        <view class="arrow">
          <text class="gui-icons arrow-icon">&#xe601;</text>
        </view>
      </view>
      <div v-if="users.length === 0" class="empty-order">
        <gui-image
          src="https://cdn.duyumy.com/accessory/0fe61301ec884459440a85e2fcd72d1ae98c46da.png"
        ></gui-image>
        <div style="font-size: 28rpx; color: #999; margin-top: -20rpx">
          暂无用户~
        </div>
      </div>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { getAllUserForc } from "@/apiShop/order.js";
import { onLoad } from "@dcloudio/uni-app";
import { showToast } from "@/utils/helper";
const users = ref([]);

const query = ref({
  type: 1,
  name: "",
  page: 1,
});

const searchUser = async () => {
  query.value.page = 1;
  const res = await getAllUserForc({
    ...query.value,
    role: query.value.type,
  });
  users.value = res.data;
};
const getUserList = async (action = "init") => {
  const res = await getAllUserForc({
    ...query.value,
    role: query.value.type,
  });
  if (res.data.length === 0) return showToast("没有更多了");
  if (action === "init") return (users.value = res.data);
  users.value = [...users.value, ...res.data];
};

const loadMore = () => {
  query.value.page++;
  getUserList("loadMore");
};

const selectUser = (user) => {
  uni.$emit("userInfo", user);
  uni.navigateBack();
};

onLoad((options) => {
  query.value.type = Number(options.type);
  getUserList();
});
</script>

<style lang="scss" scoped>
.choose-user-container {
  background: #fff;
  min-height: 100vh;
  padding: 0;
}
.search-container {
  padding: 20rpx;
  background-color: #fff;
  .search-box {
    display: flex;
    align-items: center;
    height: 72rpx;
    background-color: #f5f5f5;
    border-radius: 36rpx;
    padding: 0 30rpx;
    .search-icon {
      font-size: 32rpx;
      color: #999;
      margin-right: 10rpx;
    }
    .search-input {
      flex: 1;
      height: 72rpx;
      font-size: 28rpx;
      color: #333;
      background-color: transparent;
    }

    .placeholder {
      color: #999;
      font-size: 28rpx;
    }
  }
}
.user-list {
  margin-top: 10rpx;
  height: calc(100vh - 64px);
}
.user-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0 24rpx 32rpx;
  border-bottom: 1px solid #f5f5f5;
  background: #fff;
}
.avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: #e5e5e5;
  margin-right: 24rpx;
}
.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.user-name {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 4rpx;
}
.user-phone {
  font-size: 26rpx;
  color: #bbb;
}
.arrow {
  width: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arrow-icon {
  font-size: 36rpx;
  color: #bbb;
}

.empty-order {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  flex-direction: column;
}
</style>
